<template>
  <card :title="title" :icon="icon" :image="image">
    <!-- 导航 -->
    <div class="tab d-flex jc-between mb-3">
      <div :class="`tab-item ${currentIdx === index ? 'active' : ''}`" v-for="(item, index) in tabs" :key="index" @click="$refs.list.swiper.slideTo(index)">
        <div class="tab-title fs-14 pb-1">{{item.name}}</div>
      </div>
    </div>
    <!-- 滑块 -->
    <swiper ref="list" :options="{autoHeight: true}" @slideChangeTransitionEnd="() => currentIdx = $refs.list.swiper.activeIndex">
      <swiper-slide v-for="(item, index) in tabs" :key="index">
        <slot name="items" :list="item"></slot>
      </swiper-slide>
    </swiper>
  </card>
</template>

<script>
import Card from './Card'
export default {
  components: {
    Card
  },
  props: {
    title: { type: String, required: true },
    icon: { type: String, required: true },
    tabs: { type: Array, requires: true },
    image: { type: Object }
  },
  data () {
    return {
      currentIdx: 0
    }
  }
}
</script>

<style lang="less" scope>
.tab {
  .active {
    color: #db913f;
    border-bottom: 2px solid currentColor;
  }
}
</style>
